/**
 * @Title: evaluate-question-drawer.js
 * @Description: evaluate-question-drawer
 * @author: Fanchao
 * @date: 2020/12/16 12:23 下午
 * @version V1.0
 */
import React, { useState } from 'react';
import { connect } from 'umi';
import { Form, Drawer, Input, Button, Space, message, Select } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { createQuestionCategory, deleteQuestionCategory } from 'api/index';

const { Option } = Select;

const EvaluateQuestionDrawer = ({ questions: { evaluateQuestionDrawerVisible, questionCategoryList }, dispatch }) => {
    const [pend, setPend] = useState(false);
    const [form] = Form.useForm();
    form.setFieldsValue({
        params: [],
    });
    const onClose = () => {
        setPend(false);
        dispatch({
            type: 'questions/setEvaluateQuestionDrawerVisible',
            payload: false,
        });
    };
    const onFinish = async values => {
        const result = await createQuestionCategory({ ...values.params[0] });
        if (result.status === 'success') {
            dispatch({
                type: 'questions/getQuestionCategoryList',
                payload: {},
            });
            setPend(false);
            form.resetFields();
            form.setFieldsValue({
                params: [],
            });
            onClose();
        } else {
            message.error(result.message);
        }
    };
    return (
        <div>
            <Drawer
                title="评价类型管理"
                width={340}
                onClose={onClose}
                visible={evaluateQuestionDrawerVisible}
                bodyStyle={{ paddingBottom: 80 }}
                destroyOnClose
                footer={
                    <div
                        style={{
                            textAlign: 'right',
                        }}
                    >
                        <Button onClick={onClose} type="primary">
                            关闭
                        </Button>
                    </div>
                }
            >
                <div>
                    {
                        questionCategoryList.map(item => {
                            return (
                                <Space
                                    key={item.questionCategoryId}
                                    style={{ display: 'flex', marginBottom: 8, width: '100%' }}
                                    align="baseline"
                                >
                                    <Form.Item style={{ width: '145px' }}>
                                        <Input value={item.questionCategoryName} disabled
                                               placeholder=""/>
                                    </Form.Item>
                                    <Form.Item style={{ width: '145px' }}>
                                        <Input value={item.evaluateTaskType} disabled
                                               placeholder=""/>
                                    </Form.Item>

                                    <MinusCircleOutlined onClick={() => {
                                        deleteQuestionCategory({ questionCategoryId: item.questionCategoryId }).then(res => {
                                            if (res.status === 'success') {
                                                dispatch({
                                                    type: 'questions/getQuestionCategoryList',
                                                    payload: {},
                                                });
                                            } else {
                                                message.error(res.message);
                                            }
                                        });
                                    }}/>
                                </Space>
                            );
                        })
                    }
                </div>
                <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
                    <Form.List name="params">
                        {
                            (fields, { add, remove }) => (
                                <>
                                    {fields.map(field => (
                                        <Space key={field.key}
                                               style={{
                                                   display: 'flex',
                                                   marginBottom: 8,
                                                   width: '100%',
                                                   justifyContent: 'space-between',
                                               }}
                                               align="baseline">
                                            <Form.Item
                                                {...field}
                                                name={[field.name, 'questionCategoryName']}
                                                fieldKey={[field.fieldKey, 'questionCategoryName']}
                                                rules={[{ required: true, message: '必填' }]}
                                                style={{ width: '145px' }}
                                            >
                                                <Input placeholder="评价类型名称"/>
                                            </Form.Item>
                                            <Form.Item
                                                {...field}
                                                name={[field.name, 'evaluateTaskType']}
                                                fieldKey={[field.fieldKey, 'evaluateTaskType']}
                                                rules={[{ required: true, message: '必填' }]}
                                                style={{ width: '145px' }}
                                            >
                                                <Select
                                                    placeholder="任务主体"
                                                >
                                                    <Option value="student">学生</Option>
                                                    <Option value="school_expert">校专家</Option>
                                                    <Option value="center_expert">部系中心专家</Option>
                                                    <Option value="center">部系（中心）</Option>
                                                    <Option value="teach_section">教研室</Option>
                                                    <Option value="evaluate_student">教员评学</Option>
                                                </Select>
                                            </Form.Item>
                                            <MinusCircleOutlined onClick={() => {
                                                remove(field.name);
                                                setPend(false);
                                            }}/>
                                        </Space>
                                    ))}
                                    {
                                        pend ? null : (
                                            <Form.Item>
                                                <Button type="dashed" onClick={() => {
                                                    add();
                                                    setPend(true);
                                                }} block icon={<PlusOutlined/>}>
                                                    添加
                                                </Button>
                                            </Form.Item>
                                        )
                                    }
                                </>
                            )
                        }
                    </Form.List>
                    <Form.Item>
                        {
                            pend ? (
                                <Button type="primary" htmlType="submit">
                                    确定
                                </Button>
                            ) : null
                        }
                    </Form.Item>
                </Form>
            </Drawer>
        </div>
    );
};


export default connect(({ questions, dispatch }) => ({
    questions,
    dispatch,
}))(EvaluateQuestionDrawer);

